<template>
    <div class="forgetpass">
         <video 
          class="myvideo"
          id="myvideo"
          autoplay
          loop
          muted
          playsInline
          src="@/assets/video/city.mp4" 
        ></video>

        <div class="login-box">
            <h3 class="title">忘记密码</h3>
           <div class="box">

           </div>
        </div>
    </div>
</template>

<script>
import { ref,toRefs,reactive } from '@vue/reactivity'
export default {
    components:{
      
    },
    setup(){
        const state = reactive({
          
        })
        return{
            ...toRefs(state)
        }
    }
}
</script>


<style lang="scss" >
.forgetpass{
  width:100%;
  height:100%;
    .myvideo{
        min-width: 100%;
        min-height: 100%;
        height: auto;
        width: auto;
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 0;
    }
    .login-box{
        position: absolute;
        width:390px;
        height:340px;
        // min-height:340px;
        border:1px solid darkkhaki;
        border-radius: 8px;
        padding:15px;
        background: rgba(0, 0, 0, 0.2);
        left:0;
        right:0;
        bottom:0;
        top:0;
        margin:auto;
        .title{
            font-size:26px;
            text-align: center;
            font-weight: 500;
            color:#fff;
        }
        .box{
            margin-top:20px;
            .el-tabs__nav {
                width:100%;
                .el-tabs__active-bar{
                    background-color: darkorange;
                }
                .el-tabs__item{
                    flex:1;
                    width:50%;
                    text-align: center;
                    color:#fff;
                }
                .is-active{
                    color:darkorange;
                }
            }
            .myform{
                .el-input__icon{
                    color:#fff;
                }
                .el-input__inner{
                    background: transparent;
                    color:#fff;
                }

                .flex{
                    display: flex;
                    .btn{
                        flex:1;
                    }
                }
                .lastitem{
                    margin-bottom: 0;
                    height:20px;
                    ::v-deep .el-form-item__content{
                        line-height:1 !important;
                        height:20px;
                    }
                    .links{
                        display: flex;
                        justify-content: space-between;
                        .litem{
                            font-size: 12px;
                            color:darkorange;
                        }
                        .color{
                            color:#fff;
                        }
                    }
                }
            }
        }
    }
}
</style>